<template lang="">
  <div class="Search">
      <!-- 导航栏 -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <!-- 搜索框区域 -->
      <van-cell-group>
          <van-search
      v-model.trim="key"
      @input="getSuggest(key)"
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
    >
      <template #action>
        <div @click="onSearch (key)" >搜索</div>
      </template>
    </van-search>
      </van-cell-group>
    <!-- 联想记录区域 -->
    
    </van-cell-group>
     <van-cell-group v-if="key">
      <van-cell  v-for="item,index in  colorSuggests" 
      :key="index" 
      @click="$router.push({name:'result',query:{key:suggestionList[index]}})"
      icon="search" >
       
        <template #right-icon>
          <van-icon style="color:#ddd;" name="close" />
        </template>
         <div v-html="item"></div>
      </van-cell>
    </van-cell-group>
<!-- 历史记录区域 -->
     <van-cell-group v-else>
      <van-cell title="历史记录" />
      <van-cell  v-for="item,index in  historyList" :key="index" 
      :title="item" 
      icon="search" 
      @click="$router.push({path:'/result',query:{key:item}})"
      >
        <template #right-icon>
          <van-icon style="color:#ddd;" name="close" />
        </template>
      </van-cell>
      </van-cell-group>
  </div>
</template>
<script>
import {suggestionAPI} from '@/api'
import {gethistoriesAPI} from '@/api'
import {saveHistory} from '@/utils/storage'
// import result from '@/views/home/result'
export default {
  data() {
    return {
      key: "",
      suggestionList:[],
      timerId:null,
      historyList: JSON.parse(window.localStorage.getItem("history")) || [],
    };
  },
  methods: {
      onSearch(){
      if(this.key){
       if (this.historyList.indexOf(this.key) == -1) {
         this.historyList.unshift(this.key)
         window.localStorage.setItem(
           "history",
           JSON.stringify(this.historyList)
           )
       }
       this.$router.push({
          name: "result",
          query: {
            key: this.key,
          },
        });
       }
    },

     getSuggest(key){
       clearTimeout(this.timerId)
      if(key){
      this.timerId = setTimeout( async() =>{

        let res = await suggestionAPI(key)
        // console.log(res);
        this.suggestionList = res.data.data.options
      },500)
      }
    
    },
  
    
   
  },
    computed:{
      colorSuggests(){
        let reg = new RegExp(this.key,'ig')
        return this.suggestionList.map((v)=>
        v.replace(reg,`<span style="color:red;">${this.key}</span>`))
      // console.log(reg);
      }
    },

  //  async created(){
  //      if(this.$store.state.tokenObj.token){
  //        let res = await gethistoriesAPI ()
  //        console.log(res)
  //       this.historiesList = res.data.data.results
  //      }
       
  //  },
  components:{
    // result
  }
};
</script>
<style lang="less" scoped>
.Search{
      .van-nav-bar__arrow {
    color: #fff !important;
  }

  .van-icon-close {
    color:gray;
  }
}

</style>
